<template>
    <div>
        <pageHeader></pageHeader>
        <div class="body">
            <div class="container">
                <h1 class="page-title" v-if="aid == null">发表文章</h1>

                <h1 class="page-title" v-else>修改文章</h1>

                <form class="a-form">
                    <div class="field">
                        <label for="">标题</label>
                        <input type="text" v-model="article.title" />
                    </div>

                    <div class="field">
                        <label for="">摘要</label>
                        <input type="text" v-model="article.summary" />
                    </div>

                    <div class="field">
                        <label for="">内容</label>
                        <textarea
                            name=""
                            id=""
                            cols="30"
                            rows="10"
                            v-model="article.content"
                        ></textarea>
                    </div>

                    <div class="action">
                        <button type="button" @click="onSubmit">确定</button>
                    </div>
                </form>
            </div>
        </div>
        <pageFooter></pageFooter>
    </div>
</template>

<script>
import pageHeader from "@/components/commons/pageHeader";
import pageFooter from "@/components/commons/pageFooter";
export default {
    props: ["aid"],
    components: { pageHeader, pageFooter },
    data() {
        return {
            article: {
                title: "",
                summary: "",
                content: "",
            },
        };
    },

    mounted() {
        this.loadArticle();
    },

    methods: {
        onSubmit() {
            if (this.aid != null) {
                this.$request.put("/api/article", this.article).then(() => {
                    alert("修改成功！");
                    this.$router.push("/");
                });
            } else {
                this.$request.post("/api/article", this.article).then(() => {
                    alert("添加成功！");

                    this.$router.push("/");
                });
            }
        },

        loadArticle() {
            this.$request.get("/api/article/" + this.aid).then((response) => {
                this.article = response.data.article;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.page-title {
    line-height: 30px;
    font-size: 26px;
    margin-bottom: 10px 0 30px 0;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.a-form {
    width: 800px;
    margin: 0 auto;

    .field {
        margin: 15px 0;
        label {
            display: inline-block;
            width: 80px;
            margin-right: 10px;
            text-align: center;
            vertical-align: top;
        }

        input {
            width: 710px;
            height: 30px;
            padding: 0 15px;
            box-sizing: border-box;
        }

        textarea {
            width: 710px;
            height: 400px;
            padding: 15px;
            box-sizing: border-box;
        }
    }

    .action {
        margin: 30px 0 20px 0;
        text-align: center;
        button {
            height: 30px;
            padding: 0 15px;
            letter-spacing: 2px;
        }
    }
}
</style>